import React from 'react';
import { withRouter } from 'react-router';
import { InputItem, Picker, Modal, Toast } from 'antd-mobile';
import './style/celue.css'

const tabData = [
    { title: '按天配资', key: 0 },
    { title: '按月配资', key: 1 },
    { title: '免息配资', key: 2 },
    { title: 'VIP配资', key: 3 },
]
const jiaoYiShiJianData = [
    { title: '今天', key: 0 },
    { title: '下个交易日', key: 1 },
]
const district = [
    { value: '1', label: '01' },
    { value: '2', label: '02' },
    { value: '3', label: '03' },
    { value: '4', label: '04' },
    { value: '5', label: '05' },
    { value: '6', label: '06' },
    { value: '7', label: '07' },
    { value: '8', label: '08' },
    { value: '9', label: '09' },
    { value: '10', label: '10' },
]

class CeLue extends React.Component {

    state = {
        tabIndex: 0,
        jiaoYiShiJian1: 0,
        jiaoYiShiJian2: 0,
        jiaoYiShiJian3: 0,
        jiaoYiShiJian4: 0,
        benjin1: '',
        benjin2: '',
        benjin3: '',
        benjin4: '',
        beishu1: '1',
        beishu2: '1',
        beishu3: '1',
        beishu4: '1',
        agree: false,
        modal2: false,
        yhq: {},
        visible: false,
        yhqData: [],
        selectYhq: -1,
    }

    switchTab = (v) => {
        this.setState({
            tabIndex: v
        })
    }

    switchJiaoYiShiJian = (v) => {
        switch (this.state.tabIndex) {
            case 0:
                this.setState({
                    jiaoYiShiJian1: v
                })
                break;
            case 1:
                this.setState({
                    jiaoYiShiJian2: v
                })
                break;
            case 2:
                this.setState({
                    jiaoYiShiJian3: v
                })
                break;
            case 3:
                this.setState({
                    jiaoYiShiJian4: v
                })
                break;
            default:
                break;
        }

    }

    componentDidMount() {
        const yhqData = [
            { title: '签到红包', price: '＋25.00', detaile: '已经签到过6天了', key: 0 },
            { title: '签到红包', price: '＋25.00', detaile: '已经签到过6天了', key: 1 },
            { title: '签到红包', price: '＋25.00', detaile: '已经签到过6天了', key: 2 },
            { title: '签到红包', price: '＋25.00', detaile: '已经签到过6天了', key: 3 },
            { title: '签到红包', price: '＋25.00', detaile: '已经签到过6天了', key: 4 },
            { title: '签到红包', price: '＋25.00', detaile: '已经签到过6天了', key: 5 },
        ];
        this.setState({
            yhqData
        })
    }

    renderTab = () => {
        switch (this.state.tabIndex) {
            case 0:
                return (<div className='tab1' key='0'>
                    <div className='item'>
                        <span className='left'>您的本金</span>
                        <div className='right'>
                            <InputItem
                                type="number"
                                placeholder="请输入1000的倍数"
                                labelNumber={0}
                                value={this.state.benjin1}
                                maxLength={11}
                                onChange={(v) => {
                                    this.setState({
                                        benjin1: v
                                    })
                                }}
                            ></InputItem>
                            <span className='detaile'>元</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginTop: '1rem' }}>
                        <span className='left'>操盘倍数</span>
                        <Picker data={district}
                            onOk={(v) => {
                                this.setState({
                                    beishu1: v
                                })
                            }}
                            title='操盘倍数' value={[this.state.beishu1.toString()]} cols={1} className="forss">
                            <div className='right'>
                                <span className='num'>{this.state.beishu1}倍</span>
                                <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                            </div>
                        </Picker>
                    </div>
                    <div className='item'>
                        <span className='left'>总操盘资金</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>警戒线</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>平仓线</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>开始交易时间</span>
                        <div className='right'>
                            {
                                jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                    return (
                                        <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                            <img className='check' alt='' src=
                                                {`${this.state.jiaoYiShiJian1 === v.key ? require('./img/celue/xuanze.png') :
                                                    require('./img/celue/weixuanze.png')}`}></img>
                                            <span className='detaile' >{v.title}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='detaile'>2天起，未结算自动顺延</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginBottom: '2rem' }}>
                        <span className='left'>操盘时间</span>
                        <div className='right'>
                            <span className='detaile'>2020-02-23至2020-02-26止</span>
                        </div>
                    </div>
                </div>)
            case 1:
                return (<div className='tab1' key='1'>
                    <div className='item'>
                        <span className='left'>您的本金</span>
                        <div className='right'>
                            <InputItem
                                type="number"
                                placeholder="请输入1000的倍数"
                                labelNumber={0}
                                value={this.state.benjin2}
                                maxLength={11}
                                onChange={(v) => {
                                    this.setState({
                                        benjin2: v
                                    })
                                }}
                            ></InputItem>
                            <span className='detaile'>元</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginTop: '1rem' }}>
                        <span className='left'>操盘倍数</span>
                        <Picker data={district}
                            onOk={(v) => {
                                this.setState({
                                    beishu2: v
                                })
                            }}
                            title='操盘倍数' value={[this.state.beishu2.toString()]} cols={1} className="forss">
                            <div className='right'>
                                <span className='num'>{this.state.beishu2}倍</span>
                                <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                            </div>
                        </Picker>
                    </div>
                    <div className='item'>
                        <span className='left'>总操盘资金</span>
                        <div className='right'>
                            <span className='num'>10000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>警戒线</span>
                        <div className='right'>
                            <span className='num'>10000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>平仓线</span>
                        <div className='right'>
                            <span className='num'>10000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='num'>10000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>开始交易时间</span>
                        <div className='right'>
                            {
                                jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                    return (
                                        <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                            <img className='check' alt='' src=
                                                {`${this.state.jiaoYiShiJian2 === v.key ? require('./img/celue/xuanze.png') :
                                                    require('./img/celue/weixuanze.png')}`}></img>
                                            <span className='detaile' >{v.title}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='detaile'>7天起，未结算自动顺延</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginBottom: '2rem' }}>
                        <span className='left'>操盘时间</span>
                        <div className='right'>
                            <span className='detaile'>2020-12-23至2020-02-26止</span>
                        </div>
                    </div>
                </div>)
            case 2:
                return (<div className='tab1' key='2'>
                    <div className='item'>
                        <span className='left'>您的本金</span>
                        <div className='right'>
                            <InputItem
                                type="number"
                                placeholder="请输入1000的倍数"
                                labelNumber={0}
                                value={this.state.benjin3}
                                maxLength={11}
                                onChange={(v) => {
                                    this.setState({
                                        benjin3: v
                                    })
                                }}
                            ></InputItem>
                            <span className='detaile'>元</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginTop: '1rem' }}>
                        <span className='left'>操盘倍数</span>
                        <Picker data={district}
                            onOk={(v) => {
                                this.setState({
                                    beishu3: v
                                })
                            }}
                            title='操盘倍数' value={[this.state.beishu3.toString()]} cols={1} className="forss">
                            <div className='right'>
                                <span className='num'>{this.state.beishu3}倍</span>
                                <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                            </div>
                        </Picker>
                    </div>
                    <div className='item'>
                        <span className='left'>总操盘资金</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>警戒线</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>平仓线</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>开始交易时间</span>
                        <div className='right'>
                            {
                                jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                    return (
                                        <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                            <img className='check' alt='' src=
                                                {`${this.state.jiaoYiShiJian3 === v.key ? require('./img/celue/xuanze.png') :
                                                    require('./img/celue/weixuanze.png')}`}></img>
                                            <span className='detaile' >{v.title}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='detaile'>2天起，未结算自动顺延</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginBottom: '2rem' }}>
                        <span className='left'>操盘时间</span>
                        <div className='right'>
                            <span className='detaile'>2020-02-23至2020-02-26止</span>
                        </div>
                    </div>
                </div>)
            case 3:
                return (<div className='tab1' key='3'>
                    <div className='item'>
                        <span className='left'>您的本金</span>
                        <div className='right'>
                            <InputItem
                                type="number"
                                placeholder="请输入1000的倍数"
                                labelNumber={0}
                                value={this.state.benjin4}
                                maxLength={11}
                                onChange={(v) => {
                                    this.setState({
                                        benjin4: v
                                    })
                                }}
                            ></InputItem>
                            <span className='detaile'>元</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginTop: '1rem' }}>
                        <span className='left'>操盘倍数</span>
                        <Picker data={district}
                            onOk={(v) => {
                                this.setState({
                                    beishu4: v
                                })
                            }}
                            title='操盘倍数' value={[this.state.beishu4.toString()]} cols={1} className="forss">
                            <div className='right'>
                                <span className='num'>{this.state.beishu4}倍</span>
                                <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                            </div>
                        </Picker>
                    </div>
                    <div className='item'>
                        <span className='left'>总操盘资金</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>警戒线</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>平仓线</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='num'>1000.00</span>
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>开始交易时间</span>
                        <div className='right'>
                            {
                                jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                    return (
                                        <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                            <img className='check' alt='' src=
                                                {`${this.state.jiaoYiShiJian4 === v.key ? require('./img/celue/xuanze.png') :
                                                    require('./img/celue/weixuanze.png')}`}></img>
                                            <span className='detaile' >{v.title}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className='item'>
                        <span className='left'>配资利息</span>
                        <div className='right'>
                            <span className='detaile'>2天起，未结算自动顺延</span>
                        </div>
                    </div>
                    <div className='item' style={{ marginBottom: '2rem' }}>
                        <span className='left'>操盘时间</span>
                        <div className='right'>
                            <span className='detaile'>2020-02-23至2020-02-26止</span>
                        </div>
                    </div>
                </div>)
            default:
                break;
        }
    }

    agree = () => {
        this.setState({
            agree: !this.state.agree
        })
    }
    goGuiZe = () => {
        this.props.history.push({ pathname: './guize' });
    }

    openYhq = () => {
        this.setState({
            visible: true
        })
    }
    selectYhq = (v) => {
        this.setState({
            selectYhq: v.key,
            yhq: v,
            visible: false
        })
    }
    jump() {
        if (!this.state.agree) {
            Toast.fail("请先阅读《操盘须知》")
            return
        }
        this.setState({
            modal2: !this.state.modal2
        })
    }
    render() {
        const { yhq } = this.state
        return (
            <div className='celue'>
                <div className='navbar'>
                    <span></span>
                    <span>配资</span>
                    <span onClick={this.goGuiZe}>规则</span>
                </div>
                <div className='scroll'>
                    <div className='tab'>
                        <div className='tabBar'>
                            {
                                tabData && tabData.map((v, k) => {
                                    return (
                                        <span style={{
                                            color: `${v.key === this.state.tabIndex ? '#F98743' : '#999999'}`,
                                            backgroundColor: `${v.key === this.state.tabIndex ? '#FFFFFF' : '#F8F8F8'}`
                                        }}
                                            onClick={() => this.switchTab(v.key)}
                                            key={v + k}>{v.title}</span>
                                    )
                                })
                            }
                        </div>
                        <div style={{ overflow: 'hidden' }}>
                            <div className='content' style={{
                                transform: `translateX(-${this.state.tabIndex / 4 * 100}%)`
                            }}>
                                <div className='tab-content' key='0'>
                                    <div className='tab1' style={{ width: '100%' }}  >
                                        <div className='item'>
                                            <span className='left'>您的本金</span>
                                            <div className='right'>
                                                <InputItem
                                                    type="number"
                                                    placeholder="请输入1000的倍数"
                                                    labelNumber={0}
                                                    value={this.state.benjin1}
                                                    maxLength={11}
                                                    onChange={(v) => {
                                                        this.setState({
                                                            benjin1: v
                                                        })
                                                    }}
                                                ></InputItem>
                                                <span className='detaile'>元</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginTop: '1rem' }}>
                                            <span className='left'>操盘倍数</span>
                                            <Picker data={district}
                                                onOk={(v) => {
                                                    this.setState({
                                                        beishu1: v
                                                    })
                                                }}
                                                title='操盘倍数' value={[this.state.beishu1.toString()]} cols={1} className="forss">
                                                <div className='right'>
                                                    <span className='num'>{this.state.beishu1}倍</span>
                                                    <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                                                </div>
                                            </Picker>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>总操盘资金</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>警戒线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>平仓线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>开始交易时间</span>
                                            <div className='right'>
                                                {
                                                    jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                                        return (
                                                            <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                                                <img className='check' alt='' src=
                                                                    {`${this.state.jiaoYiShiJian1 === v.key ? require('./img/celue/xuanze.png') :
                                                                        require('./img/celue/weixuanze.png')}`}></img>
                                                                <span className='detaile' >{v.title}</span>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='detaile'>2天起，未结算自动顺延</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginBottom: '2rem' }}>
                                            <span className='left'>操盘时间</span>
                                            <div className='right'>
                                                <span className='detaile'>2020-02-23至2020-02-26止</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className='tab-content' key='1'>
                                    <div className='tab1' style={{ width: '100%' }}  >
                                        <div className='item'>
                                            <span className='left'>您的本金</span>
                                            <div className='right'>
                                                <InputItem
                                                    type="number"
                                                    placeholder="请输入1000的倍数"
                                                    labelNumber={0}
                                                    value={this.state.benjin1}
                                                    maxLength={11}
                                                    onChange={(v) => {
                                                        this.setState({
                                                            benjin1: v
                                                        })
                                                    }}
                                                ></InputItem>
                                                <span className='detaile'>元</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginTop: '1rem' }}>
                                            <span className='left'>操盘倍数</span>
                                            <Picker data={district}
                                                onOk={(v) => {
                                                    this.setState({
                                                        beishu1: v
                                                    })
                                                }}
                                                title='操盘倍数' value={[this.state.beishu1.toString()]} cols={1} className="forss">
                                                <div className='right'>
                                                    <span className='num'>{this.state.beishu1}倍</span>
                                                    <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                                                </div>
                                            </Picker>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>总操盘资金</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>警戒线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>平仓线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>开始交易时间</span>
                                            <div className='right'>
                                                {
                                                    jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                                        return (
                                                            <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                                                <img className='check' alt='' src=
                                                                    {`${this.state.jiaoYiShiJian1 === v.key ? require('./img/celue/xuanze.png') :
                                                                        require('./img/celue/weixuanze.png')}`}></img>
                                                                <span className='detaile' >{v.title}</span>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='detaile'>2天起，未结算自动顺延</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginBottom: '2rem' }}>
                                            <span className='left'>操盘时间</span>
                                            <div className='right'>
                                                <span className='detaile'>2020-02-23至2020-02-26止</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className='tab-content' key='2'>
                                    <div className='tab1' style={{ width: '100%' }}  >
                                        <div className='item'>
                                            <span className='left'>您的本金</span>
                                            <div className='right'>
                                                <InputItem
                                                    type="number"
                                                    placeholder="请输入1000的倍数"
                                                    labelNumber={0}
                                                    value={this.state.benjin1}
                                                    maxLength={11}
                                                    onChange={(v) => {
                                                        this.setState({
                                                            benjin1: v
                                                        })
                                                    }}
                                                ></InputItem>
                                                <span className='detaile'>元</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginTop: '1rem' }}>
                                            <span className='left'>操盘倍数</span>
                                            <Picker data={district}
                                                onOk={(v) => {
                                                    this.setState({
                                                        beishu1: v
                                                    })
                                                }}
                                                title='操盘倍数' value={[this.state.beishu1.toString()]} cols={1} className="forss">
                                                <div className='right'>
                                                    <span className='num'>{this.state.beishu1}倍</span>
                                                    <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                                                </div>
                                            </Picker>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>总操盘资金</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>警戒线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>平仓线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>开始交易时间</span>
                                            <div className='right'>
                                                {
                                                    jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                                        return (
                                                            <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                                                <img className='check' alt='' src=
                                                                    {`${this.state.jiaoYiShiJian1 === v.key ? require('./img/celue/xuanze.png') :
                                                                        require('./img/celue/weixuanze.png')}`}></img>
                                                                <span className='detaile' >{v.title}</span>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='detaile'>2天起，未结算自动顺延</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginBottom: '2rem' }}>
                                            <span className='left'>操盘时间</span>
                                            <div className='right'>
                                                <span className='detaile'>2020-02-23至2020-02-26止</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className='tab-content' key='3'>
                                    <div className='tab1' style={{ width: '100%' }}  >
                                        <div className='item'>
                                            <span className='left'>您的本金</span>
                                            <div className='right'>
                                                <InputItem
                                                    type="number"
                                                    placeholder="请输入1000的倍数"
                                                    labelNumber={0}
                                                    value={this.state.benjin1}
                                                    maxLength={11}
                                                    onChange={(v) => {
                                                        this.setState({
                                                            benjin1: v
                                                        })
                                                    }}
                                                ></InputItem>
                                                <span className='detaile'>元</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginTop: '1rem' }}>
                                            <span className='left'>操盘倍数</span>
                                            <Picker data={district}
                                                onOk={(v) => {
                                                    this.setState({
                                                        beishu1: v
                                                    })
                                                }}
                                                title='操盘倍数' value={[this.state.beishu1.toString()]} cols={1} className="forss">
                                                <div className='right'>
                                                    <span className='num'>{this.state.beishu1}倍</span>
                                                    <img className='arrow' src={require('./img/celue/right.png')} alt=''></img>

                                                </div>
                                            </Picker>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>总操盘资金</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>警戒线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>平仓线</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='num'>1000.00</span>
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>开始交易时间</span>
                                            <div className='right'>
                                                {
                                                    jiaoYiShiJianData && jiaoYiShiJianData.map((v, k) => {
                                                        return (
                                                            <div onClick={() => this.switchJiaoYiShiJian(v.key)} className='radioBox  flex align-center' key={v + k}>
                                                                <img className='check' alt='' src=
                                                                    {`${this.state.jiaoYiShiJian1 === v.key ? require('./img/celue/xuanze.png') :
                                                                        require('./img/celue/weixuanze.png')}`}></img>
                                                                <span className='detaile' >{v.title}</span>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                        <div className='item'>
                                            <span className='left'>配资利息</span>
                                            <div className='right'>
                                                <span className='detaile'>2天起，未结算自动顺延</span>
                                            </div>
                                        </div>
                                        <div className='item' style={{ marginBottom: '2rem' }}>
                                            <span className='left'>操盘时间</span>
                                            <div className='right'>
                                                <span className='detaile'>2020-02-23至2020-02-26止</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>




                            </div>
                        </div>
                    </div>
                    <div className='agree'>
                        <img className='check' onClick={this.agree} alt='' src=
                            {`${this.state.agree ? require('./img/celue/xuanze.png') :
                                require('./img/celue/weixuanze.png')}`}></img>
                        <span>我已阅读并同意 </span>
                        <span>《操盘须知》</span>
                    </div>

                    <Modal
                        popup
                        visible={this.state.modal2}
                        animationType="slide-up"
                    >
                        <div style={{
                            height: `${this.state.visible ? '0' : 'auto'}`, overflow: 'hidden'
                        }} className='celue-modal'>
                            <div className='rowspan'>
                                <div className='left'>
                                    <span>您需要支付：</span>
                                    <span style={{ color: '#F98743' }}>¥ 104500</span>
                                </div>
                                <img alt='' onClick={() => {
                                    this.setState({
                                        modal2: false
                                    })
                                }} src={require('./img/celue/close.png')}></img>
                            </div>
                            <div className='detaile'>
                                <span>本金100000 + 利息5000 - 优惠券500</span>
                            </div>
                            <div className='kyje'>
                                <div className='left'>
                                    <span>可用余额：</span>
                                    <span style={{ color: '#F98743' }}>¥500</span>
                                </div>
                                <span className='right'>充值</span>
                            </div>
                            <div className='yhq'  >
                                <span className='left'>优惠券</span>
                                <div onClick={this.openYhq} className='right'>
                                    <span>{yhq.title || "选择优惠券"}</span>
                                    <img alt='' src={require('./img/celue/right.png')}></img>
                                </div>
                            </div>
                            <div className='submit'  >
                                立即配资
                            </div>
                        </div>
                        <div className='yhqlb' style={{
                            height: `${!this.state.visible ? '0' : 'auto'}`,
                            overflow: 'hidden'
                        }}>
                            <div className='navbar'>
                                <img alt='' onClick={() => {
                                    this.setState({
                                        visible: false
                                    })
                                }} src={require('./img/celue/left.png')}></img>
                                <span>优惠券列表</span>
                                <img alt='' onClick={() => {
                                    this.setState({
                                        modal2: false
                                    })
                                }} src={require('./img/celue/close.png')}></img>
                            </div>
                            <div className='yhq' style={{ overflowY: 'scroll' }}>
                                {
                                    this.state.yhqData && this.state.yhqData.map((v, k) => {
                                        return (
                                            <div onClick={() => this.selectYhq(v)} className='item' key={v + k}
                                                style={{ backgroundImage: `url(${v.key === this.state.selectYhq ? require('./img/celue/yhq.png') : require('./img/celue/yhq4.png')})` }}>
                                                <div className='left'>
                                                    <span>{v.title}</span>
                                                    <span>{v.price}</span>
                                                </div>
                                                <span className='right'>{v.detaile}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </Modal>

                </div>
                <div className='submit' onClick={() => { this.jump() }}>
                    立即配资
                    </div>
            </div>
        )
    }
}

export default withRouter(CeLue);